
<script setup lang="ts">
import { reactive } from 'vue';
import type{ iState } from '@/type/homeType';
import { getSwipeFn } from '@/api/home';
import { onMounted,onUnmounted } from 'vue';
import { ref } from 'vue';
import type{ Ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { useRoute } from 'vue-router';
import { detailListDataFn } from '@/api/detail';
import type{ iStates } from '@/type/detail';
import { useRouter } from 'vue-router';
let map:any = null;
const like=ref(false)
const router =useRouter()
onMounted(() => {
  console.log(window);

  
  window._AMapSecurityConfig = {
    securityJsCode: "	b4fcdcfe65e7f8941e28c7d6066f60ed」",
  };
  AMapLoader.load({
    key: "	8efc5dd3fe5f1d04a6c7e72b4528a755", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
const route =useRoute()
const detailText:Ref<string>=ref('')
const states : iStates =reactive({
  detailbox:[],
  detailData:[]
})
const locationtotal:Ref<string> =ref('')

const people:number =Number(route.query.start)+1
const bathroom:number =Number(route.query.start)-1
const state: iState = reactive({
  swipeData: [],
  kindData:[],
  kindProData:[],
  nameListData:[]
});

function buyClick(){
  router.push(   {
     name: 'preorder',
        query: {
          bed:  route.query.bed,
          kind:  route.query.kind,
          price:  route.query.price,
          start: route.query.start,
          img:route.query.img,
          proid:route.query.proid
        }
})
}
const arr={
          bed: route.query.bed,
          kind:route.query.kind,
          price: route.query.price,
          start:route.query.start,
          img:route.query.img,
          proid:route.query.proid
}
const likearry = ref(JSON.parse(localStorage.getItem('likearrays')) || []);
function likeClick(){
  like.value=!like.value
  const currentProductId = route.query.proid as string
  if(like.value){
    likearry.value.push(arr)
    
    // localStorage.setItem('likearrays',likearry.value)
    localStorage.setItem('likearrays', JSON.stringify(likearry.value)); 
    console.log(likearry.value);
  }else{

    for (let i = 0; i < likearry.value.length; i++) {
      if(likearry.value[i].proid==route.query.proid){
        likearry.value.splice(i,1)
        localStorage.setItem('likearrays', JSON.stringify(likearry.value));
        // localStorage.setItem('likearray',JSON.stringify(likearry))
        console.log(likearry.value);
        
      }
      
    }
  }
}
onMounted(() => {
    state.swipeData=getSwipeFn()
    detailListDataFn().then(res=>{
      console.log(res.data);
      console.log(res.data.newKnd);
      states.detailbox =res.data.newKnd    
      console.log(states.detailbox[0]);  
      detailText.value=res.data.text
      locationtotal.value =res.data.location
      console.log(locationtotal.value); 
     
      console.log( locationtotal.value.split(' '));
      
    })    
})
function backClick(){
  router.push('/home')
}
function talkClick() {
  router.push('/talkwindow')
}
</script>
<template>
<main class="box">
  <div class="content">
    <van-icon @click="backClick" color="white" class="back" size="40" name="arrow-left" />
    <van-icon size="40" v-if="like==false" @click="likeClick" color="white"  class="like" name="like" />
    <van-icon size="40" v-else @click="likeClick" color="#d81e06"  class="like" name="like" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
  <van-swipe-item v-for="item in state.swipeData":key=item.Swipid><img :src="item.imgurl" alt=""></van-swipe-item>
</van-swipe>
<div class="boxtop">
    <div class="detailkind">{{  route.query.kind}}市-高级公寓</div>
    
    <img class="detailbox" src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9/u761.svg" alt=""><div class="detailcenter">精装高层电梯8楼/市中心/金鸡西路</div>
    </div>
   <div class="tagbox">
    <van-tag class="tag1" size="large" type="primary"> {{ route.query.start }}分 </van-tag>
    <van-tag class="tag" size="large"  type="primary">{{states.detailbox[0] }}</van-tag>
    <van-tag class="tag" size="large"   type="primary">{{ states.detailbox[1] }}</van-tag>
    <van-tag class="tag"  size="large"  type="primary">{{ states.detailbox[2]}}</van-tag>
    <van-tag class="tag"  size="large" type="primary">{{ states.detailbox[3]}}</van-tag> 
    </div> 

    <div class="detailbox">
    <div class="detailmore">详情</div>
    <div class="detailtext">{{  detailText }}......</div>
    <div class="servesbox">
    <div class="people">
      <img class="simg" src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u935.svg" alt="">
    <span>{{ people }}位访客</span></div>
    <div class="room">
    <img class="simg" src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u937.svg" alt="">
      <span>{{ route.query.bed }}间卧室</span>
    </div>

    <div class="bed">
      <img class="simg" src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u939.svg" alt="">
      <span>{{ route.query.bed }}张床</span>
    </div>
    <div class="bathroom">
      <img class="simg" src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%BF%E5%B1%8B%E8%AF%A6%E6%83%85/u941.svg" alt="">
      <span>{{ bathroom}}间卫生间</span>
    </div>
    </div>
    </div>
    <div class="detaillocationbox">
    <div class="title">地点</div>
    <div class="location">{{ locationtotal.split(' ')[0] }},{{ locationtotal.split(' ')[1] }},{{ locationtotal.split(' ')[2] }}</div>
    <div class="locationdetail">{{ locationtotal.split(' ')[0] }}{{ locationtotal.split(' ')[1] }}{{ locationtotal.split(' ')[2] }}香洲区前山街道金鸡西路000号</div>
    <div class="going">出行</div>
    <div id="container"></div>
    <div class="bottom"><van-icon size="20" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u282.svg" /><div class="give">准确位置将在预定后提供</div></div>

    </div>
    <div class="price"><span class="pricelift">价格明细:</span><span class="priceright">￥{{ route.query.price }}/晚</span></div>
    <div class="buttonbox"><van-button @click="talkClick" type="primary">与房东沟通</van-button> <van-button @click="buyClick" plain type="primary">立即预定</van-button></div>
  </div>

</main>
</template>

<style lang="scss" scoped>
.like{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 22;
}

.back{
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 22;
}
.content{
  position: relative;
}
main,.box,.content{
    width: 100%;
    height: 100%;
    background-color: #fbfbfb;
}
.my-swipe {
  height: 2.6rem;
  line-height: 2.6rem;
  width: 100%;

  img {
    width: 100%;
    height: 100%;
  }
}
.boxtop{
    margin: 20px;
    height: 50px;
    position: relative;
    .detailkind{
    font-weight: 800;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
}
.detailbox{
  background-color: #f9f9f9;
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: -20px;
    right: 0;
}
.detailcenter{ 
  font-weight: 800;
  font-size: 18px;
  position: absolute;
  bottom: 0;
  left: 0;
}
}
.tagbox{
  margin-left: 10px;
  .tag1{
margin: 5px 10px;
padding:5px 28px;
color: white;
background-color:#5bb8cc;

}
.tag{
margin: 5px 10px;
padding:5px 10px;
background-color: #e4e4e4;
color: black;
}
}

.detailbox{
  width: 90%;
  height: 2.2rem;
  background-color: white;
  margin: 20px auto;
  border: 1px solid #ffffff;
  box-shadow: 2px 4px  #eaeaea;
  .detailmore{
    font-weight: 800;
    font-size: 22px;
    margin: 14px;
  }
  .detailtext{
    font-size: 14px;
    margin:  0 5px;
  }
}
.simg{
  width: 34px;
}
.servesbox{
  width: 90%;

  height: 1rem;
  margin: 30px auto;
  position: relative;
  .people{
  position: absolute;
  width: 120px;
  top: 0;
  left: 0;
  span{
    font-size: 14px;
   position: absolute;
   top: 10px;
   left:40px ;
  }
}
.room{
  width: 120px;
  position: absolute;
  top: 0;
  right: 0;
  img{
    margin-left: 10px;
  }
  span{
   
    font-size: 14px;
   position: absolute;
   top: 10px;
   right:14px ;
   
  }
}
 .bed{
  width: 120px;
  position: absolute;
  bottom: 0;
  left: 0;
  span{
    font-size: 14px;
   position: absolute;
   top: 10px;
   left:40px ;
  }
 }
 .bathroom{
  width: 110px;
  position: absolute;
  bottom: 0;
  right: 0;

  span{
    font-size: 14px;
   position: absolute;
   top: 10px;
   right:0px ;
  }
 }

}
.detaillocationbox{
  position: relative;
  width: 90%;
  height: 5.2rem;
  background-color: white;
  margin: 20px auto;
  border: 1px solid #ffffff;
  box-shadow: 2px 4px  #eaeaea;
  .title{
    font-weight: 800;
    font-size: 22px;
    margin: 14px;
  }
  .location{
    font-weight: 800;
    font-size: 14px;
    margin: 14px;
  }
  .locationdetail{
    font-size: 14px;
    margin: 14px;
    text-decoration: underline;
  }
  .going{
    font-weight: 800;
    font-size: 14px;
    margin: 14px;
  }
  #container{
        position: absolute;
        left: 10%;
        bottom: 60px;
        width: 80%;
        height: 300px;
    }
    .bottom{
      position: absolute;
      width: 500px;
      left: 10%;
      bottom: 20px;
      .give{
        position: absolute;
        left: 40px;
        top: 5px;
      }
    }
 }
 .price{
  margin: 28px;
  .pricelift{
  font-weight: 800;
    font-size: 14px;
    margin-left: 28px;
 }
 .priceright{
  font-weight: 800;
    font-size: 24px;
    margin-top: 20px;
    margin-left: 20px;
    color: #ff9933;
 }
 }
 .buttonbox{
  width: 90%;
  display: flex;
  justify-content:space-around ;
  margin:  30px auto;
 }
</style>